<script setup lang="ts">
import type { SysDictionaryDataVo } from '#/system/dict/dictionaryData'
import { getByTypeDictData } from '@/api/system/dict/dictData'

interface Props {
  /**
   * 字典类型
   */
  dictType: string
  /**
   * 显示值
   */
  value: any
  /**
   * tag标签主题
   */
  effect?: 'dark' | 'light' | 'plain'
  /**
   * Tag 是否为圆形
   */
  round?: boolean
  /**
   * 是否有边框描边
   */
  hit?: boolean
  /**
   * 是否禁用渐变动画
   */
  disableTransitions?: boolean
  /**
   * 是否可关闭
   */
  closable?: boolean
  /**
   * 尺寸
   */
  size?: 'default' | 'small' | 'large'
  /**
   * 空值提示文字
   */
  emptyMsg?: string
}
const props = withDefaults(defineProps<Props>(), {
  dictType: '',
  effect: 'light',
  round: false,
  hit: false,
  disableTransitions: false,
  closable: false,
  size: 'default',
  emptyMsg: '无',
})

let dataList = $ref<SysDictionaryDataVo[]>([])
let data = $ref<SysDictionaryDataVo>({} as SysDictionaryDataVo)

function getDictList() {
  getByTypeDictData(props.dictType as any).then((res) => {
    dataList = res
    dataList.forEach((item) => {
      item.label = item.name
      item.value = item.dictValue
    })
    setVal()
  })
  setVal()
}

function setVal() {
  dataList.forEach((item) => {
    if (item.dictValue === String(props.value)) {
      data = item
    }
  })
}

watch(() => props.value, () => {
  setVal()
})

onMounted(() => {
  getDictList()
})
</script>

<template>
  <el-tag
    v-if="dataList?.length"
    :effect="effect"
    :round="round"
    :hit="hit"
    :closable="closable"
    :disable-transitions="disableTransitions"
    :size="size"
    :type="data.dictStyle as any"
  >
    {{ data.name || emptyMsg }}
  </el-tag>
</template>

<style scoped></style>
